<template>
	<div>
		<header class="aui-header">
			<a class="aui-pull-left aui-btn">
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">整点特卖</div>
			<div class="rightbut"></div>
		</header>
		<div class="menulist">
			<ul class="menulist-ul">
				<li class="samemenu-li" v-for="item in data" @click="prolistbut(item.id)">
					<h1>{{item.activetime}}</h1>
					<p v-if="item.isSpecial	== 0">已开抢</p>
					<p v-else-if="item.isSpecial == 1" v-model="specid">特卖中</p>
					<p v-else-if="item.isSpecial == 2">未开始</p>
				</li>

				<!--<li class="samemenu-li pitchsty">
					<h1>11:00</h1>
					<p>已开抢</p>
				</li>
				<li class="samemenu-li">
					<h1>17:00</h1>
					<p>已开抢</p>
				</li>
				<li class="samemenu-li">
					<h1>19:00</h1>
					<p>已开抢</p>
				</li>-->
			</ul>
		</div>
		<div class="seckillbanner" v-show="seckAdvert">
			<a><img :src="advJson[0].img" class="sekillimg"></a>
		</div>
		<div class="seckillbanner" v-show="seckAdverts"  v-for="item in advJson">
			
			<div class="samebanner"><img :src="item.img"></div>
			
		</div>
		<div class="prometcon">
			<h4>抢购中 先下单先得哦</h4>
		</div>
		<!--
        	作者：offline
        	时间：2018-01-19
        	描述：商品数据
        -->
		<div class="goodscon">
			<ul class="goodsecklist" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<li class="goodseckill-li" v-for="item in proJson">
					<div class="goodseckimg"><img :src="item.mainImageUrl"></div>
					<div class="goodseckword">
						<div class="goodname">{{item.goodsName}}</div>
						<div class="vouchercon">
							<div class="redvoucher">{{item.orginPrice}}元</div>
							<div class="collectimg"></div>
							<span class="pocketmoney">赚{{marketProfitPercent}}元</span>
						</div>
						<div class="purchasecon">
							<span class="seckillprice"><i class="priceSymbol">￥</i>32</span>
							<div class="rushbut">立即抢购</div>
						</div>
						<div class="stockcon">
							<span class="costprice">￥{{price}}</span>
							<div class="stockinfo">
								<span class="stocknum">库存剩余{{totalSales}}</span>
								<div class="progessbar">
									<div class="changeprogess"></div>
								</div>
							</div>
						</div>
					</div>
				</li>
				
			</ul>
		</div>
	</div>
</template>

<script>
import { BaseUrl } from '../Baseurl/common.js';
	export default {
		data() {
			return {
				data:[],
				advJson:[],
				seckAdvert:true,
				seckAdverts:false,
				specid:'',
				proJson:[],
				index: 0,
				loading: false
			}
		},
		created(){
			var url = BaseUrl+"special/getspecialtime?spuPlatform=yh";
			this.$http.get(url).then(res => {
				
				var json = res.data.data;
				for(var i =0;i<json.length;i++){
					console.log(json[i]);
					var time = json[i].specialTime.split(' ');
					var intertime = time[1].split(':');
					json[i].activetime = intertime[0]+':'+intertime[1];
					//console.log(intertime);
					if(json[i].isSpecial == "1"){
						this.specid = json[i].id
					}
				}
				this.data = res.data.data;
				//商品列表数据追加
				var listUrl = BaseUrl+'special/speciallist?specialId='+this.specid+'&type=jd';
				this.$http.get(listUrl).then(res => {
					//console.log(res.data);
					if(res.data.code == "10000"){
						this.proJson = res.data.data.list;
					}
				})


			})
			//广告位
			var advertUrl = BaseUrl+'special/advertlist';
			this.$http.get(advertUrl).then(res => {
				//console.log(res.data.data.list.length);
				if(res.data.code == "10000"){
					this.advJson = res.data.data.list
					var len = res.data.data.list.length;
					if(len == 1){
						//this,
						this.seckAdvert = true;
						this.seckAdverts = false;
					}else{
						this.seckAdvert = false;
						this.seckAdverts = true;
					}
				}
			})

		},
		
		methods:{

			prolistbut:function(obj,index){
				//商品列表数据追加
				var listUrl = BaseUrl+'special/speciallist?specialId='+obj+'&type=yh';
				this.$http.get(listUrl+ "&length=10&start="+this.index).then(res => {
					console.log(res.data);
					if(res.data.code == "10000"){
						this.proJson = res.data.data.list;

						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}
				})
			},
			loadMore() {

				this.loading = true;
				//alert(this.index);

				setTimeout(() => {
					this.prolistbut(obj,this.index);
					this.loading = false;
				}, 2500);

			}
		}
	}
</script>

<style scoped="scoped">
	.tabli{
		color: #ff2040;
	}
	.rightbut {
		width: 0.43rem;
		height: 0.61rem;
		background: url(../assets/navgation.png);
		background-size: 100%;
		float: right;
		margin: 0.17rem;
	}
	/******时间标题*******/
	
	.menulist {
		width: 100%;
		height: 0.99rem;
		background: #FFFFFF;
		margin-top: 1rem;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	
	.menulist-ul {
		width: 900px;
		height: 100%;
		font-size: 0;
		display: flex;
	}
	
	.samemenu-li {
		display: inline-block;
		height: 100%;
		text-align: center;
		color: #323232;
		width: 1.5rem;
	}
	
	.samemenu-li>h1 {
		font-size: 0.33rem;
	}
	
	.samemenu-li>p {
		font-size: 0.22rem;
	}
	
	.pitchsty {
		color: #ff2040 !important;
		border-bottom: solid 0.03rem #FF2040;
	}
	
	::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}
	/******广告位******/
	
	.seckillbanner {
		width: 100%;
		height: 2.34rem;
		border-bottom: solid 0.01rem #CCCCCC;
		border-top: solid 0.01rem #CCCCCC;
		display: flex;
		font-size: 0;
	}
	
	.sekillimg {
		width: 100%;
		height: 100%;
	}
	
	.samebanner {
		width: 49.5%;
		height: 100%;
		display: inline-block;
		margin-left: 0.06rem;
	}
	
	.samebanner:nth-child(2) {
		margin-left: 0;
	}
	
	.samebanner>img {
		width: 100%;
		height: 100%;
	}
	/******提示*******/
	
	.prometcon {
		width: 100%;
		border-bottom: solid 0.01rem #CCCCCC;
		background: #FFFFFF;
		padding: 0.19rem 0.25rem;
	}
	
	.prometcon>h4 {
		font-size: 0.24rem;
		color: #323232;
		font-weight: normal;
	}
	/***商品数据****/
	
	.goodscon {
		width: 100%;
		margin-top: 0.1rem;
	}
	
	.goodsecklist {
		font-size: 0;
	}
	
	.goodseckill-li {
		width: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		/*padding: 0 0.5rem;
		margin-top: 0.5rem;*/
		padding: 0 0.2rem;
		margin-top: 0.1rem;
	}
	
	.goodseckimg {
		width: 2.8rem;
		height: 2.8rem;
	}
	
	.goodseckimg>img {
		width: 100%;
		height: 100%;
	}
	
	.goodseckword {
		width: 57%;
	}
	
	.goodname {
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #323232;
		font-size: 0.26rem;
		line-height: 0.4rem;
		margin-top: 0.15rem;
	}
	/***红包券****/
	
	.vouchercon {
		font-size: 0;
		margin-top: 0.2rem;
		display: -webkit-box;
	}
	
	.redvoucher {
		width: 1.08rem;
		height: 0.28rem;
		background: url(../assets/coupn.png);
		background-size: 100%;
		line-height: 0.28rem;
		text-align: center;
		color: #FFFFFF;
		font-size: 0.2rem;
	}
	
	.collectimg {
		width: 0.37rem;
		height: 0.35rem;
		background: url(../assets/collect.png);
		background-size: 100%;
		margin-left: 0.7rem;
	}
	
	.pocketmoney {
		color: #FF2040;
		font-size: 0.28rem;
		margin-left: 0.2rem;
	}
	
	.purchasecon {
		margin-top: 0.3rem;
	}
	
	.seckillprice {
		color: #FF2040;
		font-size: 0.36rem;
		display: -webkit-inline-box;
		line-height: 0.35rem;
	}
	
	.priceSymbol {
		font-size: 0.28rem;
		color: #FF2040;
		font-style: normal;
		display: block;
	}
	.rushbut{
		width: 1.4rem;
		height: 0.4rem;
		background-color: #FF2040;
		border-radius: 0.2rem;
		text-align: center;
		color: #FFFFFF;
		line-height: 0.4rem;
		float: right;
		font-size: 0.24rem;
	}
	.stockcon{
		margin-top: 0.1rem;
	}
	.costprice{
		font-size: 0.26rem;
		color: #989898;
		text-decoration: line-through;
	}
	.stockinfo{
		float: right;
		display: flex;
	}
	.stocknum{
		color: #989898;
		font-size: 0.22rem;
	}
	.progessbar{
		width: 1.4rem;
		height: 0.11rem;
		border: solid 0.01rem #FF2040;
		border-radius: 0.3rem;
	    margin-top: 0.12rem;
        margin-left: 0.1rem;
	}
	.changeprogess{
		width: 76%;
		height: 0.1rem;
		background-color: #FF2040;
	}
</style>